<script setup>
import useWeb3 from "../hooks/useWeb3";
import { ref, onMounted } from "vue";
const { web3, voteContract, getAccount } = useWeb3();

// 定义主持人信息
const host = ref("");


// 定义开始时间和结束时间
const startTime = ref("");
const endTime = ref("");

// 定义投票标题
const voteItem = ref("");

// 定义候选人数组
const candidates = ref("");

// 获取主持人信息
const getHost = async () => {//异步函数
    host.value = await voteContract.methods.host().call();
};



// 格式化时间戳为可读时间
const formatTime = (timestamp) => {
    if (!timestamp) return "未设置";
    const date = new Date(timestamp * 1000); // 转换为毫秒
    return date.toLocaleString(); // 转换为本地时间格式
};

onMounted(async () => {//生存周期函数
    await getHost();
});


// 选民地址
const voterAddress = ref("");




// 设置投票标题
const setVoteItem = async () => {
    if (!voteItem.value) {
        alert("请输入投票标题");
        return;
    }

    const account = await getAccount();
    await voteContract.methods
        .setVoteItem(voteItem.value)
        .send({ from: account })
        .on("receipt", () => {
            console.log("投票标题设置成功");
        })
        .on("error", (error) => {
            console.error("交易失败:", error);
        });
};


// 添加候选人数组
const addCandidates = async () => {
    let arr;
    try {
        arr = JSON.parse(candidates.value); // 将字符串解析为数组
    } catch (error) {
        alert("请输入有效的候选人数组，例如：[\"候选人1\", \"候选人2\"]");
        return;
    }
    // const arr = eval(candidates.value);//字符串转数组js

    const account = await getAccount();
    await voteContract.methods
        .addCandidates(arr)
        .send({ from: account })
        .on("receipt", () => {
            console.log("候选人添加成功");
            candidates.value = ""; // 清空输入框
        })
        .on("error", (error) => {
            console.error("交易失败:", error);
        });
};

// 设置投票时间
const setVotingPeriod = async () => {

    if (!startTime.value || !endTime.value) {
        alert("请输入开始时间和结束时间");
        return;
    }

    // 将用户输入的时间转换为时间戳
    const startTimestamp = Math.floor(new Date(startTime.value).getTime() / 1000);
    const endTimestamp = Math.floor(new Date(endTime.value).getTime() / 1000);

    if (startTimestamp >= endTimestamp) {
        alert("结束时间必须晚于开始时间");
        return;
    }

    // 调用智能合约方法设置时间
    const account = await getAccount();
    await voteContract.methods
        .setVotingPeriod(startTimestamp, endTimestamp)
        .send({ from: account })
        .on("receipt", () => {
            console.log("投票时间设置成功");
        })
        .on("error", (error) => {
            console.error("交易失败:", error);
        });
};

// 分发票权
const mandate = async () => {

     // 检查用户是否输入地址
     if (!voterAddress.value || voterAddress.value.trim() === "") {
        alert("请输入投票人地址");
        return; // 停止执行
    }
    
    // const arr = eval(voterAddress.value);//字符串转数组js
    // 将字符串转换为数组
    let arr;
    try {
        arr = eval(voterAddress.value); // 字符串转数组
    } catch (error) {
        alert("地址格式错误，请输入有效的地址数组");
        return; // 停止执行
    }

        // 检查数组是否有效
        if (!Array.isArray(arr) || arr.length === 0) {
        alert("地址格式错误，请输入有效的地址数组");
        return; // 停止执行
    }

    // 调用智能合约
    const account = await getAccount();
    voteContract.methods
        .mandate(arr)
        .send({ from: account })
        .on("receipt", () => {
            console.log("选票分发成功");
            alert("选票分发成功");
        })
        .on("error", (error) => {
            console.error("选票分发失败:", error);
            alert("选票分发失败，请重试");
        });
};




</script>



<template>
    <div class="box1">
        <van-divider>分发票权</van-divider>

        <!-- 主持人地址 -->
        <div class="host">
            <p class="label"><van-icon name="manager" />主持人地址</p>
            <p class="address">{{ host }}</p>
        </div>

        <!-- 投票标题 -->
        <div class="vote-item">
            <p class="label"><van-icon name="edit" />投票标题</p>
            <van-field v-model="voteItem" placeholder="请输入投票标题" />
            <van-button @click="setVoteItem">设置标题</van-button>
        </div>

        <!-- 投票开始时间 -->
        <div class="voting-period">
            <p class="label"><van-icon name="clock-o" />投票开始时间</p>
            <van-field v-model="startTime" type="datetime-local" placeholder="请输入开始时间" />
        </div>

        <!-- 投票结束时间 -->
        <div class="voting-period">
            <p class="label"><van-icon name="clock-o" />投票结束时间</p>
            <van-field v-model="endTime" type="datetime-local" placeholder="请输入结束时间" />
        </div>

        <!-- 设置投票时间按钮 -->
        <div class="btn">
            <van-button block @click="setVotingPeriod">设置投票时间</van-button>
        </div>

        <!-- 候选人数组 -->
        <div class="candidates">
            <p class="label"><van-icon name="friends-o" />候选人数组</p>
            <textarea class="votors" v-model="candidates" placeholder='例如：["候选人1", "候选人2"]'></textarea>
        </div>

        <!-- 添加候选人按钮 -->
        <div class="btn">
            <van-button block @click="addCandidates">添加候选人</van-button>
        </div>



        <!-- 投票人地址 -->
        <div class="voter-address">
            <p class="label"><van-icon name="friends-o" />投票人地址</p>
            <textarea class="votors" v-model="voterAddress" placeholder='例如：["地址1", "地址2"]'></textarea>
        </div>

        <!-- 开始分发选票按钮 -->
        <div class="btn">
            <van-button block @click="mandate">开始分发选票</van-button>
        </div>
    </div>
</template>


<style scoped lang="less">
.box1 {
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.host,
.vote-item,
.candidates,
.voting-period,
.voter-address {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.label {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    white-space: nowrap;
}

.address,
.time,
.votors {
    color: #666;
    font-size: 14px;
    white-space: nowrap;
}

.votors {
    width: 100%;
    /* 宽度占满父容器 */
    height: 60px;
    /* 高度适中 */
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.van-field {
    width: 100%;
    /* 输入框宽度占满父容器 */
    margin-bottom: 0;
}

.van-button {
    border-radius: 8px;
    background-color: #ee742f;
    color: #fff;
    font-weight: bold;
    transition: background-color 0.3s ease;

    &:hover {
        background-color: #d65e1f;
    }
}

.btn {
    margin-top: 16px;
    margin-bottom: 24px;

    .van-button {
        width: 100%;
    }
}

.voter-address {
    margin-bottom: 24px;
}
</style>